<template>
  <div class="monitoring-early-warning inset-shadow">
    <cardTitle text="监控预警"/>
    <div class="card-left-1">
      <vue-seamless-scroll
        :class-option="option"
        :data="listData"
      >
        <ul class="item-ul">
          <li v-for="(item, i) in 99" :key="i" class="item-li">
            <div class="li-no">{{ i + 1 }}</div>
            <div class="li-text-box">
              <div class="left">
                <div class="p1">
                  <div class="t1">运单号：</div>
                  <div class="t1">YD80065543543</div>
                  <div class="t3">待调度</div>
                </div>
                <div class="p2">
                  <div class="label">所属部门</div>
                  <div class="value" title="华塑供应链华塑供应链">华塑供应链华塑供应链</div>
                  <div class="label">预警时间</div>
                  <span class="value">2025/03/18</span>
                </div>
              </div>
              <div class="right">
                <div :class="['status-icon','status-1']"></div>
              </div>
            </div>
          </li>
        </ul>
      </vue-seamless-scroll>
    </div>
  </div>
</template>

<script>
import cardTitle from "../cardTitle.vue";
import vueSeamlessScroll from "vue-seamless-scroll";

export default {
  name: "monitoringEarlyWarning",
  props: {},
  components: {
    cardTitle,
    vueSeamlessScroll
  },
  data () {
    return {
      listData: [],
      option: {
        step: 1, // 步长
        limitMoveNum: 0, // 开始滚动的数据量
        hoverStop: true, // 鼠标悬停时停止
        direction: 1, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控
        waitTime: 1000, // 单步停止等待时间
        openDirection: true
      }
    };
  },
  computed: {},
  watch: {},
  created () {
  },
  mounted () {
  },
  methods: {}
};
</script>

<style lang="scss" scoped>
@import "../../scss/common.scss";

.monitoring-early-warning {
  flex: 1;
  max-height: px-to-rem(320px);
  display: flex;
  flex-direction: column;
  overflow: hidden;

  .card-left-1 {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;

    .item-ul {
      flex: 1;
      color: #fff;
      overflow: hidden;
      position: relative;
      padding: 0 px-to-rem(10px);
    }

    .item-li {
      width: 100%;
      position: relative;
      height: 77px;
      background: #0F2747;
      margin: px-to-rem(8px) 0;

      &:first-child {
        margin-top: 0;
      }

      .li-no {
        position: absolute;
        top: 0;
        left: 0;
        width: px-to-rem(25px);
        height: px-to-rem(30px);
        text-align: center;
        background: url("../../images/li-no.png") no-repeat;
        background-size: 100%;
        font-family: DOUYINSANSBOLD-GB;
        font-size: 18px;
        font-weight: normal;
        font-style: italic;
        font-stretch: normal;
        letter-spacing: 0;
        color: #ffffff;
      }

      .li-text-box {
        display: flex;
        height: 100%;

        .left {
          flex: 1;
          display: flex;
          flex-direction: column;
          padding: px-to-rem(16px) 0 px-to-rem(16px) px-to-rem(30px);
          gap: px-to-rem(10px);

          .p1, .p2 {
            display: flex;
            align-items: center;
          }

          .t1 {
            font-size: px-to-rem(14px);
            color: rgba(255, 255, 255, 0.9);
          }

          .t3 {
            width: px-to-rem(60px);
            height: px-to-rem(20px);
            text-align: center;
            background-color: rgba(255, 224, 56, 0.1);
            border-radius: 10px;
            color: #ffe038;
            font-size: px-to-rem(12px);
            margin-left: auto;
            margin-right: px-to-rem(10px);
          }

          .label {
            font-size: 12px;
            color: rgba(0, 182, 255, 0.3);
            margin-right: px-to-rem(10px);
          }

          .value {
            font-size: 12px;
            color: #00b6ff;
            width: px-to-rem(90px);
            margin-right: px-to-rem(10px);
            white-space: nowrap; /* 禁止换行 */
            overflow: hidden; /* 隐藏溢出内容 */
            text-overflow: ellipsis; /* 显示省略号 */
          }
        }

        .right {
          width: px-to-rem(50px);
          padding-right: px-to-rem(10px);
          display: flex;
          flex-direction: column;
          justify-content: center;

          .status-icon {
            width: px-to-rem(50px);
            height: px-to-rem(50px);
          }

          .status-1 {
            background: url("../../images/status-1.png") no-repeat;
            background-size: 100%;
          }

          .status-2 {
            background: url("../../images/status-2.png") no-repeat;
            background-size: 100%;
          }
        }
      }
    }
  }
}
</style>
